<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动日历 - 流光小队</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .calendar-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .calendar-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .calendar-header h1 {
            font-size: 2.5em;
            color: #2d3748;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .calendar-header p {
            font-size: 1.2em;
            color: #718096;
            max-width: 600px;
            margin: 0 auto;
        }

        .calendar-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .calendar-nav {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .nav-btn {
            padding: 10px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: white;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .current-month {
            font-size: 1.3em;
            font-weight: 600;
            color: #2d3748;
            min-width: 150px;
            text-align: center;
        }

        .view-toggle {
            display: flex;
            gap: 10px;
        }

        .toggle-btn {
            padding: 10px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 25px;
            background: white;
            color: #718096;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .toggle-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }

        .toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
        }

        .calendar-grid {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            margin-bottom: 30px;
        }

        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            background: #f7fafc;
            border-bottom: 1px solid #e2e8f0;
        }

        .weekday {
            padding: 15px;
            text-align: center;
            font-weight: 600;
            color: #4a5568;
            font-size: 0.9em;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .calendar-day {
            min-height: 120px;
            border-right: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
            padding: 10px;
            position: relative;
            transition: background-color 0.3s ease;
        }

        .calendar-day:hover {
            background: #f7fafc;
        }

        .calendar-day.other-month {
            background: #f7fafc;
            color: #a0aec0;
        }

        .calendar-day.today {
            background: #ebf8ff;
            border: 2px solid #667eea;
        }

        .day-number {
            font-size: 1.1em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .calendar-day.other-month .day-number {
            color: #a0aec0;
        }

        .calendar-day.today .day-number {
            color: #667eea;
        }

        .day-events {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .day-event {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8em;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .day-event:hover {
            transform: scale(1.05);
        }

        .event-tech {
            background: #3182ce;
        }

        .event-workshop {
            background: #38a169;
        }

        .event-competition {
            background: #d69e2e;
        }

        .event-social {
            background: #e53e3e;
        }

        .event-meeting {
            background: #805ad5;
        }

        .event-more {
            background: #718096;
            text-align: center;
            font-size: 0.7em;
        }

        .upcoming-events {
            background: #f7fafc;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .upcoming-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .upcoming-title {
            font-size: 1.5em;
            font-weight: 600;
            color: #2d3748;
        }

        .add-event-btn {
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .add-event-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .upcoming-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .upcoming-item {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .upcoming-item:hover {
            transform: translateY(-3px);
        }

        .upcoming-date {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .date-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2em;
            font-weight: 600;
        }

        .date-info {
            flex: 1;
        }

        .date-day {
            font-size: 1.1em;
            font-weight: 600;
            color: #2d3748;
        }

        .date-time {
            font-size: 0.9em;
            color: #718096;
        }

        .upcoming-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .upcoming-location {
            font-size: 0.9em;
            color: #718096;
            margin-bottom: 10px;
        }

        .upcoming-tags {
            display: flex;
            gap: 8px;
        }

        .upcoming-tag {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            color: white;
        }

        .tag-tech {
            background: #3182ce;
        }

        .tag-workshop {
            background: #38a169;
        }

        .tag-competition {
            background: #d69e2e;
        }

        .tag-social {
            background: #e53e3e;
        }

        .tag-meeting {
            background: #805ad5;
        }

        .calendar-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
        }

        .stat-label {
            color: #718096;
            font-size: 1.1em;
        }

        @media (max-width: 768px) {
            .calendar-controls {
                flex-direction: column;
                align-items: stretch;
            }

            .calendar-nav {
                justify-content: center;
            }

            .view-toggle {
                justify-content: center;
            }

            .weekday {
                padding: 10px 5px;
                font-size: 0.8em;
            }

            .calendar-day {
                min-height: 80px;
                padding: 5px;
            }

            .day-number {
                font-size: 0.9em;
            }

            .day-event {
                font-size: 0.7em;
                padding: 2px 4px;
            }

            .calendar-stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>流光小队</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li>
                    <a href="../../index.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="../about/index.html">
                        <i class="fas fa-info-circle"></i>
                        关于我们
                    </a>
                </li>
                
                <!-- 成员相关 -->
                <li>
                    <a href="../members/index.html">
                        <i class="fas fa-users"></i>
                        成员介绍
                    </a>
                </li>
                <li>
                    <a href="../excellent/index.html">
                        <i class="fas fa-star"></i>
                        优秀成员
                    </a>
                </li>
                
                <!-- 活动相关 -->
                <li>
                    <a href="../activities/upcoming.html">
                        <i class="fas fa-calendar-alt"></i>
                        活动预告
                    </a>
                </li>
                <li>
                    <a href="../past/index.html">
                        <i class="fas fa-history"></i>
                        往期活动
                    </a>
                </li>
                <li class="active">
                    <a href="index.html">
                        <i class="fas fa-calendar"></i>
                        活动日历
                    </a>
                </li>
                
                <!-- 成果与资源 -->
                <li>
                    <a href="../achievements/index.html">
                        <i class="fas fa-trophy"></i>
                        小组成果
                    </a>
                </li>
                <li>
                    <a href="../resources/index.html">
                        <i class="fas fa-book"></i>
                        学习资料
                    </a>
                </li>
                <li>
                    <a href="../resources/shares.html">
                        <i class="fas fa-share-alt"></i>
                        成员分享
                    </a>
                </li>
                
                <!-- 互动与讨论 -->
                <li>
                    <a href="../interaction/index.html">
                        <i class="fas fa-comments"></i>
                        互动交流
                    </a>
                </li>
                
                <!-- 加入与联系 -->
                <li>
                    <a href="../join/index.html">
                        <i class="fas fa-user-plus"></i>
                        加入我们
                    </a>
                </li>
                <li>
                    <a href="../contact/index.html">
                        <i class="fas fa-address-book"></i>
                        联系方式
                    </a>
                </li>
                
                <!-- 其他扩展 -->
                <li>
                    <a href="../partners/index.html">
                        <i class="fas fa-handshake"></i>
                        合作伙伴
                    </a>
                </li>
                <li>
                    <a href="../faq/index.html">
                        <i class="fas fa-question-circle"></i>
                        常见问题
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>活动日历</h1>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="calendar-section">
                <!-- 页面标题 -->
                <div class="calendar-header">
                    <h1>活动日历</h1>
                    <p>查看团队活动安排，管理个人日程</p>
                </div>

                <!-- 日历控制栏 -->
                <div class="calendar-controls">
                    <div class="calendar-nav">
                        <button class="nav-btn" onclick="previousMonth()">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <div class="current-month" id="currentMonth">2024年1月</div>
                        <button class="nav-btn" onclick="nextMonth()">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                    <div class="view-toggle">
                        <button class="toggle-btn active" onclick="switchView('month')" data-view="month">
                            <i class="fas fa-calendar-alt"></i> 月视图
                        </button>
                        <button class="toggle-btn" onclick="switchView('week')" data-view="week">
                            <i class="fas fa-calendar-week"></i> 周视图
                        </button>
                    </div>
                </div>

                <!-- 日历网格 -->
                <div class="calendar-grid">
                    <div class="calendar-weekdays">
                        <div class="weekday">周日</div>
                        <div class="weekday">周一</div>
                        <div class="weekday">周二</div>
                        <div class="weekday">周三</div>
                        <div class="weekday">周四</div>
                        <div class="weekday">周五</div>
                        <div class="weekday">周六</div>
                    </div>
                    <div class="calendar-days" id="calendarDays">
                        <!-- 日历天数将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 即将到来的活动 -->
                <div class="upcoming-events">
                    <div class="upcoming-header">
                        <div class="upcoming-title">即将到来的活动</div>
                        <button class="add-event-btn" onclick="addEvent()">
                            <i class="fas fa-plus"></i> 添加活动
                        </button>
                    </div>
                    <div class="upcoming-list" id="upcomingList">
                        <!-- 即将到来的活动将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 日历统计 -->
                <div class="calendar-stats">
                    <div class="stat-card">
                        <div class="stat-number">12</div>
                        <div class="stat-label">本月活动</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">5</div>
                        <div class="stat-label">本周活动</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">3</div>
                        <div class="stat-label">今日活动</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">85%</div>
                        <div class="stat-label">参与率</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 活动数据
        const events = [
            {
                id: 1,
                title: "技术分享会",
                date: "2024-01-15",
                time: "14:00",
                location: "学术报告厅",
                category: "tech",
                description: "分享最新的技术趋势和项目经验"
            },
            {
                id: 2,
                title: "机器学习工作坊",
                date: "2024-01-18",
                time: "09:00",
                location: "实验室A",
                category: "workshop",
                description: "深度学习实战工作坊"
            },
            {
                id: 3,
                title: "团队建设活动",
                date: "2024-01-20",
                time: "15:00",
                location: "户外基地",
                category: "social",
                description: "户外团队建设活动"
            },
            {
                id: 4,
                title: "项目评审会议",
                date: "2024-01-22",
                time: "10:00",
                location: "会议室B",
                category: "meeting",
                description: "项目进展评审和讨论"
            },
            {
                id: 5,
                title: "编程竞赛",
                date: "2024-01-25",
                time: "13:00",
                location: "计算机学院",
                category: "competition",
                description: "校内编程竞赛"
            },
            {
                id: 6,
                title: "前端技术研讨会",
                date: "2024-01-28",
                time: "16:00",
                location: "会议室A",
                category: "tech",
                description: "前端技术发展趋势讨论"
            }
        ];

        let currentDate = new Date();
        let currentView = 'month';

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('open');
        }

        function previousMonth() {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar();
        }

        function nextMonth() {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar();
        }

        function switchView(view) {
            currentView = view;
            
            // 更新视图按钮状态
            document.querySelectorAll('.toggle-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-view="${view}"]`).classList.add('active');
            
            // 重新渲染日历
            renderCalendar();
        }

        function renderCalendar() {
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();
            
            // 更新当前月份显示
            document.getElementById('currentMonth').textContent = `${year}年${month + 1}月`;
            
            // 获取月份的第一天和最后一天
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay());
            
            const daysContainer = document.getElementById('calendarDays');
            daysContainer.innerHTML = '';
            
            // 生成日历天数
            for (let i = 0; i < 42; i++) {
                const currentDay = new Date(startDate);
                currentDay.setDate(startDate.getDate() + i);
                
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                
                // 检查是否是其他月份
                if (currentDay.getMonth() !== month) {
                    dayElement.classList.add('other-month');
                }
                
                // 检查是否是今天
                const today = new Date();
                if (currentDay.toDateString() === today.toDateString()) {
                    dayElement.classList.add('today');
                }
                
                const dayNumber = document.createElement('div');
                dayNumber.className = 'day-number';
                dayNumber.textContent = currentDay.getDate();
                dayElement.appendChild(dayNumber);
                
                // 添加当天的事件
                const dayEvents = document.createElement('div');
                dayEvents.className = 'day-events';
                
                const dayEventsList = getEventsForDate(currentDay);
                dayEventsList.slice(0, 3).forEach(event => {
                    const eventElement = document.createElement('div');
                    eventElement.className = `day-event event-${event.category}`;
                    eventElement.textContent = event.title;
                    eventElement.onclick = () => showEventDetail(event.id);
                    dayEvents.appendChild(eventElement);
                });
                
                if (dayEventsList.length > 3) {
                    const moreElement = document.createElement('div');
                    moreElement.className = 'day-event event-more';
                    moreElement.textContent = `+${dayEventsList.length - 3}个`;
                    moreElement.onclick = () => showDayEvents(currentDay, dayEventsList);
                    dayEvents.appendChild(moreElement);
                }
                
                dayElement.appendChild(dayEvents);
                daysContainer.appendChild(dayElement);
            }
            
            // 渲染即将到来的活动
            renderUpcomingEvents();
        }

        function getEventsForDate(date) {
            const dateString = date.toISOString().split('T')[0];
            return events.filter(event => event.date === dateString);
        }

        function renderUpcomingEvents() {
            const upcomingList = document.getElementById('upcomingList');
            const today = new Date();
            const upcomingEvents = events
                .filter(event => new Date(event.date) >= today)
                .sort((a, b) => new Date(a.date) - new Date(b.date))
                .slice(0, 5);
            
            upcomingList.innerHTML = upcomingEvents.map(event => `
                <div class="upcoming-item">
                    <div class="upcoming-date">
                        <div class="date-icon">${new Date(event.date).getDate()}</div>
                        <div class="date-info">
                            <div class="date-day">${event.title}</div>
                            <div class="date-time">${event.date} ${event.time}</div>
                        </div>
                    </div>
                    <div class="upcoming-location">
                        <i class="fas fa-map-marker-alt"></i> ${event.location}
                    </div>
                    <div class="upcoming-tags">
                        <span class="upcoming-tag tag-${event.category}">${getCategoryText(event.category)}</span>
                    </div>
                </div>
            `).join('');
        }

        function getCategoryText(category) {
            const categoryMap = {
                'tech': '技术',
                'workshop': '工作坊',
                'competition': '竞赛',
                'social': '社交',
                'meeting': '会议'
            };
            return categoryMap[category] || category;
        }

        function showEventDetail(id) {
            const event = events.find(e => e.id === id);
            if (event) {
                const detailText = `
📅 活动详情

标题：${event.title}
日期：${event.date}
时间：${event.time}
地点：${event.location}
类型：${getCategoryText(event.category)}

📝 描述：
${event.description}
                `;
                alert(detailText);
            }
        }

        function showDayEvents(date, events) {
            const dateString = date.toLocaleDateString('zh-CN');
            const eventsText = events.map(event => `• ${event.title} (${event.time})`).join('\n');
            alert(`${dateString} 的活动：\n\n${eventsText}`);
        }

        function addEvent() {
            alert('添加活动功能正在开发中...\n\n📝 功能包括：\n• 活动标题和描述\n• 日期和时间选择\n• 地点设置\n• 活动类型分类\n• 参与人员管理\n\n敬请期待！');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderCalendar();
            
            // 设置当前页面的导航项为激活状态
            document.querySelectorAll('.sidebar-nav li').forEach(li => {
                li.classList.remove('active');
            });
            document.querySelector('.sidebar-nav li:nth-child(7)').classList.add('active');
        });
    </script>
</body>
</html> 